import React, {useCallback, useState} from 'react';
import {Image, StyleSheet, View} from 'react-native';

const LazyloadImg = ({style, source}) => {
  const [isLoad, setIsLoad] = useState(false);
  // const onLayout = useCallback(e => {
  //   // console.log(21, e);
  // }, []);
  const onLoadEnd = useCallback(() => {
    // console.log('onLoadEnd');
    setIsLoad(true);
  }, []);
  // const onLoadStart = useCallback(() => {
  //   console.log('onLoadStart');
  // }, []);
  // const onLoad = useCallback(() => {
  //   console.log('onLoad');
  // }, []);
  // const onError = useCallback(() => {
  //   console.log('onError');
  // }, []);
  if (source.uri) {
    source.uri && source.uri.replace(/^http:/, 'https:');
    source.uri = cdnUrl({url: source.uri, size: '', type: ''});
  }
  return (
    <View style={{...style, ...styles.ViewBox}}>
      {isLoad ? (
        <Image style={styles.lazyImg} source={source} />
      ) : (
        <>
          <Image
            style={styles.lazyImg}
            source={require('../../assets/image/bg-logo.png')}
          />
          <Image
            style={styles.img}
            // onLayout={onLayout}
            onLoadEnd={onLoadEnd}
            // onError={onError}
            // onLoadStart={onLoadStart}
            // onLoad={onLoad}
            source={source}
          />
        </>
      )}
    </View>
  );
};
const styles = StyleSheet.create({
  ViewBox: {
    position: 'relative',
    overflow: 'hidden',
  },
  img: {
    position: 'absolute',
    width: 2,
    top: -10,
    left: -10,
    height: 2,
    zIndex: 2,
  },
  lazyImg: {
    // position: 'absolute',
    width: '100%',
    top: 0,
    left: 0,
    height: '100%',
    zIndex: 1,
    // backgroundColor: '#555',
  },
});
export default LazyloadImg;

export const cdnUrl = function ({url, size = '', type = ''}) {
  const useOldCdnSuffix = ['gif', 'GIF'];
  const cdnMaps = [
    'img.yfsassets.com',
    'www.patpat.com',
    'img.ppwebstatic.com',
    'patpatasset.s3.amazonaws.com',
    'patpatdev.img.patpat.com',
    'patpatdev.s3.amazonaws.com',
    'patpatdev.s3-us-west-1.amazonaws.com',
    'patpatdev.s3.us-west-1.amazonaws.com',
    's3-us-west-1.amazonaws.com',
    'patpatwebstatic.s3-us-west-2.amazonaws.com',
    'patpatwebstatic.s3.us-west-2.amazonaws.com',
  ];
  const belongToPatpat = cdnMaps.find(item => url.indexOf(item) > -1);
  if (!belongToPatpat) {
    return url;
  }
  // 去掉url尾部的尺寸
  url = url.replace(/(?:\/)?((?:\d+x)?\d+)$/, function (_, $1) {
    size = size.length ? size : $1; // 优先从size参数获取，否则取url尾部的size
    return '';
  });

  if (size && 'https://image.yfsassets.com') {
    size = size
      .split('x')
      .map(n => n * 2)
      .join('x');
  }

  const suffixType = url.split('.').slice(-1)[0];
  let imageCDN = 'https://img.yfsassets.com';
  if (useOldCdnSuffix.indexOf(suffixType) === -1) {
    imageCDN = 'https://image.yfsassets.com'; // 服务器配置的cdn
    imageCDN += type === 'original' ? '' : '/fit-in'; // 类型
    imageCDN += /^\d+x\d+$/.test(size) ? `/${size}` : '';
  } else {
    const percentSize =
      type === 'original' ? IMAGE_SIZE[`${type}/${size}`] : IMAGE_SIZE[size];
    if (percentSize) {
      url += '/' + percentSize;
    }
  }

  url = url.replace(/^https?:\/\//, '').replace(belongToPatpat, imageCDN); // hostname替换
  return url;
};

export const IMAGE_SIZE = {
  '36x36': '64x64',
  '39x39': '64x64',
  '64x64': '64x64',
  '60x60': '120x120',
  '70x70': '120x120',
  '75x75': '120x120',
  '80x80': '120x120',
  '95x95': '120x120',
  '90x90': '120x120',
  '100x100': '120x120',
  '105x105': '120x120',
  '110x110': '120x120',
  '120x120': '120x120',
  '220x220': '220x220',
  '172x172': '350x350',
  '175x175': '350x350',
  '180x180': '350x350',
  '350x350': '350x350',
  '375x375': '600x600',
  '600x600': '600x600',
  '950x950': '950x950',
  '1024x1024': '1024x1024',
  'original/47x54': '25', // ReviewItem
  'original/84x84': '25', // PhotoGallery
  'original/178x0': '25', // WaterfallEasy
  'original/180x180': '60', // PhotoList
  'original/375x0': '80', // PatImgBrowser
};
